<template>
	<view class="container">
		<view class="car" v-for="item in memberAccListVos" :key="item" @click="coupon ? couponList(item):''">
			<view class="title">{{item.memberType==1?'默认卡':item.memberType==2?'企业子卡':item.memberType==4?'能量卡':''}}
			</view>
			<view class="content">{{item.memberCard}}</view>
			<view class="bottom">
				<view class="text" style="margin-right: 36rpx;">
          ￥<text class="price">{{item.accAmt}}</text>
				</view>
				<view class="but" @click="chargeAmt(item)" v-if="item.memberType!=2 && !coupon">
					去充值
				</view>
				<view class="but" v-if="coupon">
					选择
				</view>
			</view>
      <view class="bg">
        <image :src="bgMap[item.memberType]"></image>
      </view>
		</view>
		<view class="car energy" v-if="!iscard && !coupon">
			<view class="title">能量卡</view>
			<view class="content"></view>
			<view class="bottom">
				<view class="text">
				</view>
				<view class="but" @click="bindCar(4)" style="color:#F57546;">
					去绑定
				</view>
			</view>
      <view class="bg">
        <image :src="bgMap[2]"></image>
      </view>
		</view>
		<view class="car enterty" v-if="!iscompanyIdCard && !coupon">
			<view class="title">企业子卡</view>
			<view class="content"></view>
			<view class="bottom">
				<view class="text">
				</view>
				<view class="but" @click="bindCar(2)" style="color:#0A6CDA;">
					去绑定
				</view>
			</view>
      <view class="bg">
        <image :src="bgMap[3]"></image>
      </view>
		</view>
	</view>
</template>

<script>
	import {
		getMember
	} from '@/api/index.js'
	export default {
		data() {
			return {
				memberAccListVos: [],
				iscard: null,
				coupon: false,
				iscompanyIdCard: null,
        bgMap:{
          1: 'http://wx.xiongmaovip.com/miniapp/static/personal-center/card-default.png',
          2: 'http://wx.xiongmaovip.com/miniapp/static/personal-center/card-energy.png',
          3: 'http://wx.xiongmaovip.com/miniapp/static/personal-center/card-enterty.png',
        }
			};
		},
		onLoad(option) {
			this.coupon = option.coupon
		},
		onShow() {
			getMember({
				openId: uni.getStorageSync('userOpenId')
			}).then(res=>{
				let memberInfo = JSON.parse(uni.getStorageSync('memberInfo'))
				if (memberInfo) this.memberAccListVos = memberInfo.memberAccListVos
				this.iscard = this.memberAccListVos.some(item => item.memberType == 4);
				this.iscompanyIdCard = this.memberAccListVos.some(item => item.memberType == 2);
			})
		},
		methods: {
			chargeAmt(data) {
				uni.navigateTo({
					url: '../account-charge/index?memberId='+ data.memberId +'&memberName=' + data.memberName +'&stationId=' + data.stationId
				})
			},
			butclick() {
				// this.$emit('click',name)
			},
			bindCar(type) {
				uni.navigateTo({
					url: './bindCard?bindCar=' + type
				})
			},
			couponList(item) {
				uni.navigateTo({
					url: '../coupon-list/index?memberId=' + item.memberId
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx 30rpx;

		.car {
      height: 200upx;
			margin: 0rpx auto 20rpx 0rpx;
      padding: 0 32upx;
			//padding: 25rpx 30rpx;
			color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
			border-radius: 16px;
			position: relative;
      //background-size: 100% 200upx;
      //background-repeat: no-repeat;
      //background-image: url("http://wx.xiongmaovip.com/miniapp/static/personal-center/card-default.png");

      .bg{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        //background-image: url("http://wx.xiongmaovip.com/miniapp/static/personal-center/card-default.png");
        image{
          width: 100%;
          height: 100%;
        }
      }

			.title {
				font-size: 35rpx;
				font-weight: 800;
        color: #FFFFFF;
        //line-height: 200upx;
				//transform: skew(-15deg, 0);
				//background-image: -webkit-linear-gradient(top,
				//		#f1cca8ff,
				//		#e08a45,
				//		#de6912);
				//-webkit-background-clip: text;
				//-webkit-text-fill-color: transparent;
				//transform-origin: bottom right;
			}

			.content {
				margin: 20rpx 0rpx;
			}

			.bottom {
				position: relative;
				display: flex;
				justify-content: space-between;
				margin: 20rpx;

				.text {
					line-height: 64rpx;
          display: flex;
          align-items: center;
          .price{
            font-size: 56upx;
            font-weight: 700;
          }
				}

				.but {
          line-height: 64rpx;
					background: #FFFFFF;
					color: #006241;
					padding: 10rpx 30rpx;
					border-radius: 60rpx;

				}
			}
		}
	}
</style>